//引入Threejs
import * as THREE from "three";
//引入相机控制器
import { OrbitControls } from "three/examples/jsm/Addons.js";
//纹理加载器

//创建画布大小
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

//屏幕变化事件
window.addEventListener("resize", () => {
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;
  //调整相机
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

/*
    纹理
*/
const textureLoader = new THREE.TextureLoader();

/* 场景 */
const scene = new THREE.Scene();

//公共材质
const material = new THREE.MeshStandardMaterial();

/* 物体-boxCube */
//几何体
const boxGeo = new THREE.BoxGeometry(1, 1, 1);
//网格
const boxCube = new THREE.Mesh(boxGeo, material);
//加入场景

boxCube.position.x = -1.5;

scene.add(boxCube);

/* 物体-球 */
const sphereCube = new THREE.Mesh(
  new THREE.SphereGeometry(0.5, 16, 16),
  material
);
scene.add(sphereCube);

/* 物体 - 圆环体 */
//圆环体
const toursCube = new THREE.Mesh(
  new THREE.TorusGeometry(0.3, 0.2, 16, 32),
  material
);
toursCube.position.x = 1.5;
scene.add(toursCube);

/* 平面--来作为地面 */
const plane = new THREE.Mesh(new THREE.PlaneGeometry(5, 5), material);
plane.rotation.x = -Math.PI * 0.5;
plane.position.y = -1.3;
scene.add(plane);

/* 摄像机 */
const camera = new THREE.PerspectiveCamera(
  55,
  sizes.width / sizes.height,
  0.01,
  1000
);
camera.position.x = 2;
camera.position.y = 2;
camera.position.z = 4;
scene.add(camera);

/* 渲染器 */
const renderer = new THREE.WebGLRenderer();
renderer.setSize(sizes.width, sizes.height);
renderer.domElement.setAttribute("class", "my-canvas");
document.body.appendChild(renderer.domElement);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

/* 相机控制器 */
const cameraControl = new OrbitControls(camera, renderer.domElement);
cameraControl.enableDamping = true;

/* 光源-环境光 */
//创建光的实例
const ambientLighter = new THREE.AmbientLight(0xffffff, 0.5);
//将光源加入场景
scene.add(ambientLighter);

/* 光源 -- 方向光 */
//创建光源实例
const directionLisghter = new THREE.DirectionalLight(0x00fffc, 0.3);
//修改方向光的位置
directionLisghter.position.set(1, 0.25, 0);
scene.add(directionLisghter);

/* 方向光辅助工具 */
const directionLisghtHelper = new THREE.DirectionalLightHelper(
  directionLisghter,
  0.2
);

scene.add(directionLisghtHelper);

/* 光源 -- 半球光 */
const hemisphereLighter = new THREE.HemisphereLight(0xff0000, 0x0000ff, 0.3);

scene.add(hemisphereLighter);

/* 光源 -- 点光源 */
const pointLighter = new THREE.PointLight(0xff9000, 15, 10, 4);
pointLighter.position.set(1, -0.5, 1);
scene.add(pointLighter);

/* 光源 -- 矩形区域光 */
const rectAreaLighter = new THREE.RectAreaLight(0x4eff, 2, 1, 1);
//更改位置
rectAreaLighter.position.set(-1.5, 0, 1.5);
//更改朝向
rectAreaLighter.lookAt(new THREE.Vector3());
scene.add(rectAreaLighter);

/* 光源 -- 聚光灯 */
const spotLighter = new THREE.SpotLight(
  0x78ff00,
  0.5,
  10,
  Math.PI * 0.1,
  0.25,
  1
);

scene.add(spotLighter);

//聚光灯照向的目标
console.log(spotLighter.target);
spotLighter.target.position.x = -1.75;
scene.add(spotLighter.target);

/* 动画函数 */
const clock = new THREE.Clock();
const change = () => {
  //让物体旋转
  let elapsedTime = clock.getElapsedTime();
  sphereCube.rotation.y = 0.1 * elapsedTime;

  toursCube.rotation.y = 0.1 * elapsedTime;
  boxCube.rotation.y = 0.1 * elapsedTime;

  sphereCube.rotation.x = 0.15 * elapsedTime;

  toursCube.rotation.x = 0.15 * elapsedTime;
  boxCube.rotation.x = 0.15 * elapsedTime;

  // Update controls
  cameraControl.update();
  //渲染拍照
  renderer.render(scene, camera);
  requestAnimationFrame(change);
};

change();
